<template>
  <view class="inviteOthersToHelpSell_box" v-show="show">
    <!-- 邀请帮卖邀请好友赚奖金 -->
    <InviteFriends v-if="isShowInviteFriends" :helpSellData="helpSellData" @closeInviteFn="closeInviteFn" @inviteShareFn="inviteShareFn" />
    <!-- 邀请帮卖邀请好友赚奖金分享选择弹窗 -->
    <SharePopup v-if="isShowSharePopup" :shareBtnId="shareBtnId" :shareObject="shareObject" @closeShareFn="closeShareFn" @drawPosterFn="drawPosterFn" />
    <!-- canvas绘制分享卡片背景图 -->
    <InviteToHelpSellShare ref="helpSellRef" @shareSuccess="_drawHSSuccess" />
    <!-- 我的帮卖--生成海报组件 -->
    <HelpSellPosters ref="childHelpSellPosters" @posterShareSuccess="_drawPSSuccess"/>
    <!-- 我的帮卖--海报预览 -->
    <PosterPopup v-if="dlPosterPopup" :posterObj="posterObject" @closePosterPopupFn="closePosterPopupFn" />
  </view>
</template>

<script>
import InviteFriends from '@/components/invitation/inviteFriends.vue'
import InviteToHelpSellShare from '@/components/shareImage/inviteToHelpSellShare.vue'
import SharePopup from '@/components/shareModal/sharePopup.vue'
import HelpSellPosters from "@/components/shareImage/helpSellPosters.vue"
import PosterPopup from '@/components/shareModal/posterPopup.vue'


import helpSellApi from '@/api/helpSellGroups.js'
import Util from '@/api/util.js'

const helpSellNumKeys = ['headCount', 'memberCount', 'giveCommission', 'saleCount', 'saleAmount'] // 该数组顺序不能调整--涉及到分享卡片时全选要按照顺序显示
const helpSellText = {
  headCount: '帮卖团长',
  memberCount: '成员',
  giveCommission: '已发佣金',
  saleCount: '累计销量',
  saleAmount: '销售总额'
}
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    helpSellData: {
      type: Object,
      required: true,
      default: () => {}
    },
  },
  components: {
    InviteFriends,
    InviteToHelpSellShare,
    SharePopup,
    HelpSellPosters,
    PosterPopup
  },
  watch: {
    show(nVal){
      this.isShowInviteFriends = nVal
      if (nVal) this.getData()
    }
  },
  data () {
    return {
      isShowInviteFriends: false,
      isTwo: 0, // 分享背景时累计数字--为2才能分享
      canvasObj: {
        fansText: '',
        watchText: '',
        fansMun: 0,
        watchMun: 0,
        highQualityMun: 0,
        highQualityText: ''
      }, // 绘制海报时的数据对象
      infoData: {},
      isShowSharePopup: false, // 选择分享弹窗
      shareBtnId: 'nviteEarn', // 分享弹出分享按钮的id
      shareObject: {}, // 分享对象--用户分享卡片出去的
      dlPosterPopup: false, // 海报预览
      posterObject: {}, // 海报分享数据
    }
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    },
  },
  methods: {
    inviteShareFn () { // 选择分享弹出层
      this.drawInvite() // 绘制海报
    },
    // 分享朋友卡片背景绘制
    drawInvite() {
      let canvasData = {
        btnText: '立即加入',
        userAvatar: this.helpSellData.groupAvatar,
        userNickname: this.helpSellData.groupNickname,
        title: this.canvasObj.introduce || '这有超多好货，欢迎入团帮卖！',
        isLoadType: true,
      }
      if (this.isTwo>=2) {
        canvasData = {
          ...canvasData,
          type: 2,
          fansText: this.canvasObj.fansText,
          highQualityText: this.canvasObj.highQualityText,
          watchText: this.canvasObj.watchText,
          fansMun: Util.playvolume(this.canvasObj.fansMun || 0),
          highQualityMun: Util.playvolume(this.canvasObj.highQualityMun || 0),
          watchMun: Util.playvolume(this.canvasObj.watchMun || 0)
        }
      } else {
        canvasData = {
          ...canvasData,
          type: 1,
          fansMun: Util.playvolume(this.helpSellData.memberCount),
          fansText: '成员数',
          followGroupMun: Util.playvolume(this.helpSellData.followGroupCount),
          followGroupText: '跟团人次'
        }
      }
      this.$refs.helpSellRef.shareFrends(canvasData)
    },
    // 分享卡片背景绘制成功回调
    _drawHSSuccess(res) {
      if (res.code == 200) {
        this.shareObject = {
          ...this.shareObject,
          title: `${this.userInfo.communityName}邀请你成为${this.helpSellData.groupNickname}的帮卖，一起赚佣金` || '欢迎查看我的帮卖介绍，优质货源，放心帮卖！',
          imageUrl: res.url,
          path: `/pagesB/personalCenter/homePage?recommendCode=${this.userInfo.idCode}&accountId=${this.helpSellData.groupAccountId}&idCode=${this.helpSellData.idCode}&applyForHelp=true&shareType=true`
        }
        this.$emit('returnSharedDataFn',this.shareObject) // 把绘制好的分享数据信息返回到页面上去分享
        this.isShowInviteFriends = false
        this.isShowSharePopup = true
      }
    },
    drawPosterFn () {
      console.log(this.helpSellData,'this.helpSellDatathis.helpSellDatathis.helpSellData')
      let canvasData = {
        page: 'pagesB/personalCenter/homePage', // 二维码地址
        options: {
          applyForHelp: true,
          shareType: true,
          idCode: this.helpSellData.idCode, // 供货的idcode
          recommendCode: this.userInfo.idCode, // 推荐人的idcode
          accountId: this.helpSellData.groupAccountId,  // 供货的accountId
        },
        userAvatar: this.helpSellData.groupAvatar,
        userNickname: this.helpSellData.groupNickname,
        text1: `${this.userInfo.communityName.length>16?this.userInfo.communityName.slice(0,15)+'...':this.userInfo.communityName}邀请你成为`, // 文案1
        text2: `${this.helpSellData.groupNickname.length>16?this.helpSellData.groupNickname.slice(0,15)+'...':this.helpSellData.groupNickname}的帮卖团长`, // 文案2
        btnText: 'TA的货源非常棒，加入轻松赚佣金！',
        tipsText: '长按识别二维码 立即加入', // 提示文案
      }
      if (this.isTwo>=2) {
        canvasData = {
          ...canvasData,
          type: 1,
          fansText: this.canvasObj.fansText,
          highQualityText: this.canvasObj.highQualityText,
          watchText: this.canvasObj.watchText,
          fansMun: Util.playvolume(this.canvasObj.fansMun || 0),
          highQualityMun: Util.playvolume(this.canvasObj.highQualityMun || 0),
          watchMun: Util.playvolume(this.canvasObj.watchMun || 0)
        }
      } else {
        canvasData = {
          ...canvasData,
          fansMun: Util.playvolume(this.helpSellData.memberCount),
          fansText: '成员数',
          followGroupMun: Util.playvolume(this.helpSellData.followGroupCount),
          followGroupText: '跟团人次'
        }
      }
      console.log(canvasData)
      this.$refs.childHelpSellPosters.sharePosterFrends(canvasData)
    },
    // 海报绘制成功回调
    _drawPSSuccess (res) {
      console.log(res,'海报绘制成功回调')
      this.posterObject = res
      this.isShowSharePopup = false
      this.dlPosterPopup = true
    },
    closePosterPopupFn () {
      this.dlPosterPopup = false
      this.$emit('closeInviteOthersFn') //关闭最外层组件
    },
    // 获取帮卖分享数据
    getData() {
      helpSellApi.getHelpSellIntroduce({accountId: this.helpSellData.groupAccountId}).then(res => {
        this.infoData = res.data
        this._filterHasVal()
      })
    },

    // 判断社群数据展示是否有两项+将要绘制的数据
    _filterHasVal() {
      // 筛选出前两项有值的进行绘制
      this.isTwo = 0
      for (let i = 0, length = helpSellNumKeys.length; i < length; i++) {
        if (this.isTwo >= 3) break

        const key = helpSellNumKeys[i]
        const val = this.infoData[key]

        if (val !== null && val !== undefined) {
          ++this.isTwo
          if (this.isTwo === 1) {
            this.canvasObj.fansText = helpSellText[key]
            this.canvasObj.fansMun = val
            this.canvasObj.highQualityText = ''
          } else if (this.isTwo === 2) {
            this.canvasObj.watchText = helpSellText[key]
            this.canvasObj.watchMun = val
            this.canvasObj.highQualityText = ''
          } else if (this.isTwo === 3) {
            this.canvasObj.highQualityText = helpSellText[key]
            this.canvasObj.highQualityMun = val
          }
        }
        this.canvasObj = {
          ...this.canvasObj,
          introduce: this.infoData.introduce
        }
      }
    },
    closeShareFn () {
      this.isShowSharePopup = false
      this.$emit('closeInviteOthersFn') //关闭最外层组件
    },
    closeInviteFn () {
      this.isShowInviteFriends = false
      this.$emit('closeInviteOthersFn') //关闭最外层组件
    }
  }
}
</script>

<style lang="scss" scoped>
.inviteOthersToHelpSell_box {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}
</style>